<template>
    <div>子组件</div>
</template>

<script lang="ts">
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered} from "vue"


export default {
    name:"lifecycle",
    setup(){
        console.log('子组件setup!')
        onBeforeMount(() => {
        console.log('子组件setup=====>onBeforeMount!')
        })
        onMounted(() => {
        console.log('子组件setup=====>onMounted!')
        })
        onBeforeUpdate(() => {
        console.log('子组件setup=====>onBeforeUpdate!')
        })
        onUpdated(() => {
        console.log('子组件setup=====>onUpdated!')
        })
        onBeforeUnmount(() => {
        console.log('子组件setup=====>onBeforeUnmount!')
        })
        onUnmounted(() => {
        console.log('子组件setup=====>onUnmounted!')
        })
        onErrorCaptured((e) => {
        console.log(e,'子组件setup=====>onErrorCaptured!')
        })
        onRenderTracked((e) => {
        console.log(e,'子组件setup=====>onRenderTracked!')
        })
        onRenderTriggered((e) => {
        console.log(e,'子组件setup=====>onRenderTriggered!')
        })

    },
    beforeCreate(){
        console.log('子组件option=====>beforeCreate!')
    },
    created(){
        console.log('子组件option=====>created!')
    },
    beforeMount(){
        console.log('子组件option=====>beforeMount!')
    },
    mounted(){
        console.log('子组件option=====>mounted!')
    },
    beforeUpdate(){
        console.log('子组件option=====>beforeUpdate!')
    },
    updated(){
        console.log('子组件option=====>updated!')
    },
    beforeUnmount(){
        console.log('子组件option=====>vue2的beforeDestroy!vue3的beforeUnmount')
    },
    unmounted(){
        console.log('子组件option=====>vue2的destroyed!vue3的unmounted！')
    },
   errorCaptured(err: any, vm: any, info: any){
        console.log(err, vm, info,'子组件option=====>errorCaptured!');
        return false
    },

}
</script>
